﻿<!DOCTYPE html>

<html lang="en">

<head>
    <link href="../../css/web-icons-master/css/web-icons.css" rel="stylesheet" />
    <!--样式-->
    <link href="../../css/fontawesome-free/css/all.min.css" rel="stylesheet">
    <link href="../../css/bootstrap.min.css" rel="stylesheet" />
    <link href="../../css/core.css" rel="stylesheet" />
    <link href="../../css/site.css" rel="stylesheet" />
</head>

<body>
    <div class="page">
        <div class="page-header">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="../icons.html">矢量图标</a>
                </li>
                <li class="breadcrumb-item active">Web Icons</li>
            </ol>
            <div class="page-header-actions">
                <a class="btn btn-default btn-outline btn-round" href="https://github.com/amazingSurge/web-icons"
                    target="_blank">
                    <i class="icon wb-link" aria-hidden="true"></i> 官网</a>
            </div>
        </div>
        <div class="page-content container-fluid">
            <div class="py-30 text-center">
                <h2>图标搜索</h2>
                <form role="search">
                    <div class="input-search">
                        <input type="text" class="form-control round" placeholder="搜索图标...">
                        <button type="submit" class="input-search-btn">
                            <i class="icon wb-search" aria-hidden="true"></i>
                        </button>
                    </div>
                </form>
                <div class="icon-slider-bar">
                    <div class="slider slider-horizontal" id="">
                        <div class="slider-track">
                            <div class="slider-track-low" style="left: 0px; width: 0%;"></div>
                            <div class="slider-selection" style="left: 0%; width: 16.6667%;"></div>
                            <div class="slider-track-high" style="right: 0px; width: 83.3333%;"></div>
                        </div>
                        <div class="tooltip bs-tooltip-top tooltip-main top show" role="presentation"
                            style="left: 16.6667%;">
                            <div class="arrow"></div>
                            <div class="tooltip-inner">24</div>
                        </div>
                        <div class="tooltip tooltip-min top" role="presentation" style="display: none;">
                            <div class="arrow"></div>
                            <div class="tooltip-inner"></div>
                        </div>
                        <div class="tooltip tooltip-max bottom" role="presentation" style="top: 18px; display: none;">
                            <div class="arrow"></div>
                            <div class="tooltip-inner"></div>
                        </div>
                        <div class="slider-handle min-slider-handle round" role="slider" aria-valuemin="16"
                            aria-valuemax="64" aria-valuenow="24" tabindex="0" style="left: 16.6667%;"></div>
                        <div class="slider-handle max-slider-handle round hide" role="slider" aria-valuemin="16"
                            aria-valuemax="64" aria-valuenow="16" tabindex="0" style="left: 0%;"></div>
                    </div><input id="iconChange" class="icon-slider" type="text" data-plugin="bootstrapSlider"
                        data-slider-min="16" data-slider-max="64" data-slider-step="1" data-slider-value="24"
                        data-slider-tooltip="always" data-value="24" value="24" style="display: none;">
                </div>
            </div>
            <div class="panel">
                <div class="panel-body container-fluid">
                    <div class="row">
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="dashboard">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-dashboard" aria-hidden="true"></i>
                                <div class="icon-title">dashboard</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="inbox">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-inbox" aria-hidden="true"></i>
                                <div class="icon-title">inbox</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="cloud">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-cloud" aria-hidden="true"></i>
                                <div class="icon-title">cloud</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="bell">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-bell" aria-hidden="true"></i>
                                <div class="icon-title">bell</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="book">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-book" aria-hidden="true"></i>
                                <div class="icon-title">book</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="bookmark">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-bookmark" aria-hidden="true"></i>
                                <div class="icon-title">bookmark</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="tag">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-tag" aria-hidden="true"></i>
                                <div class="icon-title">tag</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="library">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-library" aria-hidden="true"></i>
                                <div class="icon-title">library</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="share">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-share" aria-hidden="true"></i>
                                <div class="icon-title">share</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="reply">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-reply" aria-hidden="true"></i>
                                <div class="icon-title">reply</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="refresh">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-refresh" aria-hidden="true"></i>
                                <div class="icon-title">refresh</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="move">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-move" aria-hidden="true"></i>
                                <div class="icon-title">move</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="chat">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-chat" aria-hidden="true"></i>
                                <div class="icon-title">chat</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="chat-working">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-chat-working" aria-hidden="true"></i>
                                <div class="icon-title">chat-working</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="chat-text">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-chat-text" aria-hidden="true"></i>
                                <div class="icon-title">chat-text</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="chat-group">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-chat-group" aria-hidden="true"></i>
                                <div class="icon-title">chat-group</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="envelope">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-envelope" aria-hidden="true"></i>
                                <div class="icon-title">envelope</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="envelope-open">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-envelope-open" aria-hidden="true"></i>
                                <div class="icon-title">envelope-open</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="user">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-user" aria-hidden="true"></i>
                                <div class="icon-title">user</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="user-circle">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-user-circle" aria-hidden="true"></i>
                                <div class="icon-title">user-circle</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="users">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-users" aria-hidden="true"></i>
                                <div class="icon-title">users</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="user-add">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-user-add" aria-hidden="true"></i>
                                <div class="icon-title">user-add</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="grid-9">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-grid-9" aria-hidden="true"></i>
                                <div class="icon-title">grid-9</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="grid-4">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-grid-4" aria-hidden="true"></i>
                                <div class="icon-title">grid-4</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="menu">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-menu" aria-hidden="true"></i>
                                <div class="icon-title">menu</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="layout">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-layout" aria-hidden="true"></i>
                                <div class="icon-title">layout</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="fullscreen">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-fullscreen" aria-hidden="true"></i>
                                <div class="icon-title">fullscreen</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="fullscreen-exit">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-fullscreen-exit" aria-hidden="true"></i>
                                <div class="icon-title">fullscreen-exit</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="expand">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-expand" aria-hidden="true"></i>
                                <div class="icon-title">expand</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="contract">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-contract" aria-hidden="true"></i>
                                <div class="icon-title">contract</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="arrow-expand">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-arrow-expand" aria-hidden="true"></i>
                                <div class="icon-title">arrow-expand</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="arrow-shrink">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-arrow-shrink" aria-hidden="true"></i>
                                <div class="icon-title">arrow-shrink</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="desktop">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-desktop" aria-hidden="true"></i>
                                <div class="icon-title">desktop</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="mobile">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-mobile" aria-hidden="true"></i>
                                <div class="icon-title">mobile</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="signal">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-signal" aria-hidden="true"></i>
                                <div class="icon-title">signal</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="power">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-power" aria-hidden="true"></i>
                                <div class="icon-title">power</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="more-horizontal">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-more-horizontal" aria-hidden="true"></i>
                                <div class="icon-title">more-horizontal</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="more-vertical">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-more-vertical" aria-hidden="true"></i>
                                <div class="icon-title">more-vertical</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="globe">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-globe" aria-hidden="true"></i>
                                <div class="icon-title">globe</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="map">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-map" aria-hidden="true"></i>
                                <div class="icon-title">map</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="flag">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-flag" aria-hidden="true"></i>
                                <div class="icon-title">flag</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="pie-chart">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-pie-chart" aria-hidden="true"></i>
                                <div class="icon-title">pie-chart</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="stats-bars">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-stats-bars" aria-hidden="true"></i>
                                <div class="icon-title">stats-bars</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="pluse">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-pluse" aria-hidden="true"></i>
                                <div class="icon-title">pluse</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="home">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-home" aria-hidden="true"></i>
                                <div class="icon-title">home</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="shopping-cart">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-shopping-cart" aria-hidden="true"></i>
                                <div class="icon-title">shopping-cart</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="payment">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-payment" aria-hidden="true"></i>
                                <div class="icon-title">payment</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="briefcase">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-briefcase" aria-hidden="true"></i>
                                <div class="icon-title">briefcase</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="search">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-search" aria-hidden="true"></i>
                                <div class="icon-title">search</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="zoom-in">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-zoom-in" aria-hidden="true"></i>
                                <div class="icon-title">zoom-in</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="zoom-out">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-zoom-out" aria-hidden="true"></i>
                                <div class="icon-title">zoom-out</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="download">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-download" aria-hidden="true"></i>
                                <div class="icon-title">download</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="upload">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-upload" aria-hidden="true"></i>
                                <div class="icon-title">upload</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="sort-asc">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-sort-asc" aria-hidden="true"></i>
                                <div class="icon-title">sort-asc</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="sort-des">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-sort-des" aria-hidden="true"></i>
                                <div class="icon-title">sort-des</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="graph-up">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-graph-up" aria-hidden="true"></i>
                                <div class="icon-title">graph-up</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="graph-down">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-graph-down" aria-hidden="true"></i>
                                <div class="icon-title">graph-down</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="replay">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-replay" aria-hidden="true"></i>
                                <div class="icon-title">replay</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="edit">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-edit" aria-hidden="true"></i>
                                <div class="icon-title">edit</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="pencil">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-pencil" aria-hidden="true"></i>
                                <div class="icon-title">pencil</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="rubber">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-rubber" aria-hidden="true"></i>
                                <div class="icon-title">rubber</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="crop">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-crop" aria-hidden="true"></i>
                                <div class="icon-title">crop</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="eye">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-eye" aria-hidden="true"></i>
                                <div class="icon-title">eye</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="eye-close">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-eye-close" aria-hidden="true"></i>
                                <div class="icon-title">eye-close</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="image">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-image" aria-hidden="true"></i>
                                <div class="icon-title">image</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="gallery">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-gallery" aria-hidden="true"></i>
                                <div class="icon-title">gallery</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="video">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-video" aria-hidden="true"></i>
                                <div class="icon-title">video</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="camera">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-camera" aria-hidden="true"></i>
                                <div class="icon-title">camera</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="folder">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-folder" aria-hidden="true"></i>
                                <div class="icon-title">folder</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="clipboard">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-clipboard" aria-hidden="true"></i>
                                <div class="icon-title">clipboard</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="order">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-order" aria-hidden="true"></i>
                                <div class="icon-title">order</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="file">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-file" aria-hidden="true"></i>
                                <div class="icon-title">file</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="copy">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-copy" aria-hidden="true"></i>
                                <div class="icon-title">copy</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="add-file">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-add-file" aria-hidden="true"></i>
                                <div class="icon-title">add-file</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="print">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-print" aria-hidden="true"></i>
                                <div class="icon-title">print</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="calendar">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-calendar" aria-hidden="true"></i>
                                <div class="icon-title">calendar</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="time">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-time" aria-hidden="true"></i>
                                <div class="icon-title">time</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="trash">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-trash" aria-hidden="true"></i>
                                <div class="icon-title">trash</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="plugin">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-plugin" aria-hidden="true"></i>
                                <div class="icon-title">plugin</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="extension">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-extension" aria-hidden="true"></i>
                                <div class="icon-title">extension</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="memory">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-memory" aria-hidden="true"></i>
                                <div class="icon-title">memory</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="settings">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-settings" aria-hidden="true"></i>
                                <div class="icon-title">settings</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="scissor">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-scissor" aria-hidden="true"></i>
                                <div class="icon-title">scissor</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="wrench">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-wrench" aria-hidden="true"></i>
                                <div class="icon-title">wrench</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="hammer">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-hammer" aria-hidden="true"></i>
                                <div class="icon-title">hammer</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="lock">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-lock" aria-hidden="true"></i>
                                <div class="icon-title">lock</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="unlock">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-unlock" aria-hidden="true"></i>
                                <div class="icon-title">unlock</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="volume-low">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-volume-low" aria-hidden="true"></i>
                                <div class="icon-title">volume-low</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="volume-high">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-volume-high" aria-hidden="true"></i>
                                <div class="icon-title">volume-high</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="volume-off">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-volume-off" aria-hidden="true"></i>
                                <div class="icon-title">volume-off</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="pause">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-pause" aria-hidden="true"></i>
                                <div class="icon-title">pause</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="play">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-play" aria-hidden="true"></i>
                                <div class="icon-title">play</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="stop">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-stop" aria-hidden="true"></i>
                                <div class="icon-title">stop</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="musical">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-musical" aria-hidden="true"></i>
                                <div class="icon-title">musical</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="random">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-random" aria-hidden="true"></i>
                                <div class="icon-title">random</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="reload">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-reload" aria-hidden="true"></i>
                                <div class="icon-title">reload</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="loop">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-loop" aria-hidden="true"></i>
                                <div class="icon-title">loop</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="text">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-text" aria-hidden="true"></i>
                                <div class="icon-title">text</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="bold">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-bold" aria-hidden="true"></i>
                                <div class="icon-title">bold</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="italic">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-italic" aria-hidden="true"></i>
                                <div class="icon-title">italic</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="underline">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-underline" aria-hidden="true"></i>
                                <div class="icon-title">underline</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="format-clear">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-format-clear" aria-hidden="true"></i>
                                <div class="icon-title">format-clear</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="text-type">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-text-type" aria-hidden="true"></i>
                                <div class="icon-title">text-type</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="table">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-table" aria-hidden="true"></i>
                                <div class="icon-title">table</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="attach-file">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-attach-file" aria-hidden="true"></i>
                                <div class="icon-title">attach-file</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="paperclip">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-paperclip" aria-hidden="true"></i>
                                <div class="icon-title">paperclip</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="link-intact">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-link-intact" aria-hidden="true"></i>
                                <div class="icon-title">link-intact</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="link">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-link" aria-hidden="true"></i>
                                <div class="icon-title">link</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="link-broken">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-link-broken" aria-hidden="true"></i>
                                <div class="icon-title">link-broken</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="indent-increase">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-indent-increase" aria-hidden="true"></i>
                                <div class="icon-title">indent-increase</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="indent-decrease">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-indent-decrease" aria-hidden="true"></i>
                                <div class="icon-title">indent-decrease</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="align-justify">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-align-justify" aria-hidden="true"></i>
                                <div class="icon-title">align-justify</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="align-left">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-align-left" aria-hidden="true"></i>
                                <div class="icon-title">align-left</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="align-center">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-align-center" aria-hidden="true"></i>
                                <div class="icon-title">align-center</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="align-right">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-align-right" aria-hidden="true"></i>
                                <div class="icon-title">align-right</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="list-numbered">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-list-numbered" aria-hidden="true"></i>
                                <div class="icon-title">list-numbered</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="list-bulleted">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-list-bulleted" aria-hidden="true"></i>
                                <div class="icon-title">list-bulleted</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="list">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-list" aria-hidden="true"></i>
                                <div class="icon-title">list</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="emoticon">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-emoticon" aria-hidden="true"></i>
                                <div class="icon-title">emoticon</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="quote-right">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-quote-right" aria-hidden="true"></i>
                                <div class="icon-title">quote-right</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="code">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-code" aria-hidden="true"></i>
                                <div class="icon-title">code</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="code-working">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-code-working" aria-hidden="true"></i>
                                <div class="icon-title">code-working</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="code-unfold">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-code-unfold" aria-hidden="true"></i>
                                <div class="icon-title">code-unfold</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="chevron-right">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-chevron-right" aria-hidden="true"></i>
                                <div class="icon-title">chevron-right</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="chevron-left">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-chevron-left" aria-hidden="true"></i>
                                <div class="icon-title">chevron-left</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="chevron-left-mini">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-chevron-left-mini" aria-hidden="true"></i>
                                <div class="icon-title">chevron-left-mini</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="chevron-right-mini">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-chevron-right-mini" aria-hidden="true"></i>
                                <div class="icon-title">chevron-right-mini</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="chevron-up">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-chevron-up" aria-hidden="true"></i>
                                <div class="icon-title">chevron-up</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="chevron-down">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-chevron-down" aria-hidden="true"></i>
                                <div class="icon-title">chevron-down</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="chevron-up-mini">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-chevron-up-mini" aria-hidden="true"></i>
                                <div class="icon-title">chevron-up-mini</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="chevron-down-mini">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-chevron-down-mini" aria-hidden="true"></i>
                                <div class="icon-title">chevron-down-mini</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="arrow-left">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-arrow-left" aria-hidden="true"></i>
                                <div class="icon-title">arrow-left</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="arrow-right">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-arrow-right" aria-hidden="true"></i>
                                <div class="icon-title">arrow-right</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="arrow-up">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-arrow-up" aria-hidden="true"></i>
                                <div class="icon-title">arrow-up</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="arrow-down">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-arrow-down" aria-hidden="true"></i>
                                <div class="icon-title">arrow-down</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="dropdown">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-dropdown" aria-hidden="true"></i>
                                <div class="icon-title">dropdown</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="dropup">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-dropup" aria-hidden="true"></i>
                                <div class="icon-title">dropup</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="dropright">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-dropright" aria-hidden="true"></i>
                                <div class="icon-title">dropright</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="dropleft">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-dropleft" aria-hidden="true"></i>
                                <div class="icon-title">dropleft</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="sort-vertical">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-sort-vertical" aria-hidden="true"></i>
                                <div class="icon-title">sort-vertical</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="triangle-left">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-triangle-left" aria-hidden="true"></i>
                                <div class="icon-title">triangle-left</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="triangle-right">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-triangle-right" aria-hidden="true"></i>
                                <div class="icon-title">triangle-right</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="triangle-down">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-triangle-down" aria-hidden="true"></i>
                                <div class="icon-title">triangle-down</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="triangle-up">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-triangle-up" aria-hidden="true"></i>
                                <div class="icon-title">triangle-up</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="check-circle">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-check-circle" aria-hidden="true"></i>
                                <div class="icon-title">check-circle</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="check">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-check" aria-hidden="true"></i>
                                <div class="icon-title">check</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="check-mini">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-check-mini" aria-hidden="true"></i>
                                <div class="icon-title">check-mini</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="close">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-close" aria-hidden="true"></i>
                                <div class="icon-title">close</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="close-mini">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-close-mini" aria-hidden="true"></i>
                                <div class="icon-title">close-mini</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="plus-circle">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-plus-circle" aria-hidden="true"></i>
                                <div class="icon-title">plus-circle</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="plus">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-plus" aria-hidden="true"></i>
                                <div class="icon-title">plus</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="minus-circle">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-minus-circle" aria-hidden="true"></i>
                                <div class="icon-title">minus-circle</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="minus">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-minus" aria-hidden="true"></i>
                                <div class="icon-title">minus</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="alert-circle">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-alert-circle" aria-hidden="true"></i>
                                <div class="icon-title">alert-circle</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="alert">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-alert" aria-hidden="true"></i>
                                <div class="icon-title">alert</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="help-circle">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-help-circle" aria-hidden="true"></i>
                                <div class="icon-title">help-circle</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="help">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-help" aria-hidden="true"></i>
                                <div class="icon-title">help</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="info-circle">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-info-circle" aria-hidden="true"></i>
                                <div class="icon-title">info-circle</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="info">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-info" aria-hidden="true"></i>
                                <div class="icon-title">info</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="warning">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-warning" aria-hidden="true"></i>
                                <div class="icon-title">warning</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="heart">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-heart" aria-hidden="true"></i>
                                <div class="icon-title">heart</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="heart-outline">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-heart-outline" aria-hidden="true"></i>
                                <div class="icon-title">heart-outline</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="star">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-star" aria-hidden="true"></i>
                                <div class="icon-title">star</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="star-half">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-star-half" aria-hidden="true"></i>
                                <div class="icon-title">star-half</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="star-outline">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-star-outline" aria-hidden="true"></i>
                                <div class="icon-title">star-outline</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="thumb-up">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-thumb-up" aria-hidden="true"></i>
                                <div class="icon-title">thumb-up</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="thumb-down">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-thumb-down" aria-hidden="true"></i>
                                <div class="icon-title">thumb-down</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="small-point">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-small-point" aria-hidden="true"></i>
                                <div class="icon-title">small-point</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="medium-point">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-medium-point" aria-hidden="true"></i>
                                <div class="icon-title">medium-point</div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align"
                            data-name="large-point">
                            <div class="icondemo vertical-align-middle">
                                <i class="icon wb-large-point" aria-hidden="true"></i>
                                <div class="icon-title">large-point</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

</html>